<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能公厕App</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            margin: 0;
            padding: 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #2c3e50;
        }

        .container {
            max-width: 800px;
            margin: 40px 20px;
            padding: 40px;
            background: white;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s ease;
        }

        .container:hover {
            transform: translateY(-5px);
        }   
    

        h1 {
            color: #2c3e50;
            font-size: 2.5em;
            margin-bottom: 30px;
            font-weight: 700;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }

        .description {
            color: #34495e;
            line-height: 1.6;
            font-size: 1.1em;
            margin: 20px auto;
            max-width: 600px;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 40px 0;
            padding: 0 20px;
        }

        .feature-card {
            background: #f8f9fa;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        .feature-icon {
            font-size: 2.5em;
            color: #3498db;
            margin-bottom: 15px;
        }

        .feature-title {
            font-size: 1.2em;
            color: #2c3e50;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .feature-text {
            color: #7f8c8d;
            font-size: 0.95em;
            line-height: 1.5;
        }

        .hero-image {
            width: 100%;
            max-width: 500px;
            height: auto;
            margin: 30px 0;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .hero-image:hover {
            transform: scale(1.02);
        }

        .cta-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #3498db;
            color: white;
            padding: 15px 30px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 600;
            margin-top: 30px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(52,152,219,0.2);
        }

        .cta-button:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(52,152,219,0.3);
        }

        .cta-button:active {
            transform: translateY(0);
        }

        footer {
            margin-top: auto;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9em;
        }

        @media (max-width: 768px) {
            .container {
                margin: 20px;
                padding: 20px;
            }

            h1 {
                font-size: 2em;
            }

            .features {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>智能公厕管理系统</h1>
        <p class="description">
            打造智能、高效、人性化的公共厕所管理解决方案，为用户提供便捷的如厕体验。
        </p>
        
        <img src="images/toilet_sign.jpg" alt="智能公厕系统" class="hero-image">

        <div class="features">
            <div class="feature-card">
                <i class="fas fa-map-marker-alt feature-icon"></i>
                <h3 class="feature-title">位置查找</h3>
                <p class="feature-text">快速定位附近公厕，实时导航指引</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-clock feature-icon"></i>
                <h3 class="feature-title">实时状态</h3>
                <p class="feature-text">即时了解厕位占用情况，避免排队等待</p>
            </div>
            <div class="feature-card">
                <i class="fas fa-star feature-icon"></i>
                <h3 class="feature-title">评分反馈</h3>
                <p class="feature-text">用户评价系统，持续改进服务质量</p>
            </div>
        </div>

        <a href="login.html" class="cta-button">
            <i class="fas fa-sign-in-alt"></i>
            立即使用
        </a>
    </div>

    <footer>
        <p>© 2024 智能公厕管理系统 - 让每一次如厕都更加便捷</p>
    </footer>
</body>
</html> 